<template>
    <div style="max-width: 960px;margin: 0 auto;">
        <Header></Header>
        <el-container>
            <el-header>
                <el-steps :active="active" finish-status="success"
                          style="margin-left: 70px;margin-top: 20px;width: 450px">
                    <el-step title="输入验证" icon="el-icon-mobile">
                        <div style="margin-left: 20px;margin-top: 20px;font-size: large;display: flex;align-items: center;">
                            <i class="el-icon-mobile"></i> 手机激活码
                        </div>
                    </el-step>
                    <el-step title="设置密码" icon="el-icon-edit"/>
                </el-steps>
            </el-header>
            <el-main>
                <el-form style="border-radius: 4px" :model="ruleForm" :rules="rules" ref="ruleForm"
                         class="demo-ruleForm">
                    <el-row>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <span style="margin-left: 95px">密码：</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-light">
                                <el-form-item label=" " prop="pass">
                                    <el-input type="password" placeholder="请输入新密码" v-model="ruleForm.pass" autocomplete="off"/>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="1">
                            <div class="grid-content bg-purple">
                                <span style="color:red">*</span>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <span style="margin-left: 70px">确认密码：</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-light">
                                <el-form-item label=" " prop="checkPass">
                                    <el-input type="password" placeholder="请再次输入新密码" v-model="ruleForm.checkPass" autocomplete="off"/>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="1">
                            <div class="grid-content bg-purple">
                                <span style="color:red">*</span>
                            </div>
                        </el-col>
                    </el-row>

                    <el-form-item>
                        <el-button style="padding: 12px 30px;margin-top: 12px;background-color: #409EFF;color: #FFFFFF"
                                   @click="submitForm('ruleForm')">确定
                        </el-button>
                    </el-form-item>
                </el-form>

            </el-main>
        </el-container>
    </div>
</template>

<script>
    import Header from "../../../components/Header";
    import {updatePassword} from "../../../api/userMG";

    export default {
        name: "update-pass",
        components: {Header},
        data() {

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                active: this.$route.params.active,
                ruleForm: {
                    pass: '',
                    checkPass: ''
                },
                rules: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ]
                },
            }
        },
        methods: {
            submitForm(ruleForm) {
                console.log("=======验证开始========");
                this.$refs[ruleForm].validate((valid) => {
                    console.log("=======验证完成========");
                    if (valid) {
                        const _this = this;
                        let userInfo = {
                            username : window.localStorage.username,
                            password : _this.ruleForm.pass
                        };
                        console.log("========userInfo==========",userInfo);
                        updatePassword(userInfo).then(res => {

                            _this.$router.push("SuccessPassword")
                           // const jwt = res.headers['authorization']
                            // 把数据共享出去
                            _this.$store.commit("SET_TOKEN", jwt)
                            _this.$store.removeItem("opCode");
                            // 获取
                            console.log(_this.$store.getters.getUser)
                        })
                    }
                   else {
                        console.log('提交失败!!');
                        alert('提交失败!');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>

    .el-main {
        background-color: #FFFFFF;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        margin-top: 20px;
    }

    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        margin-right: 250px;
        line-height: 5px;
    }

    .el-icon-mobile:before {
        font-size: 40px;
    }

</style>

